<style lang="scss" scoped>
	.list{
		margin-top: 0upx;
	}
</style>
<template>

	<view>
		<!-- 头部 -->
		<Header :title="'模特'"></Header>
		<!-- 搜索栏 -->
		<uni-nav-bar :fixed="false" :border="false" color="#666666" background-color="#FFFFFF" style="navbar">
			<view class="serarch-con flex flex_grow">
				<uni-icons class="input-uni-icon" type="search" size="22" color="#666666" />
				<input confirm-type="search" class="search-input flex_grow" type="text" v-model="keywords"
					placeholder="输入模特信息" @confirm="confirm">
			</view>
			<text @click="shareModle" style="padding: 0 8rpx;" class="iconfont icon-fenxiang"></text>
			<iconfont slot="right" class="switch" :icon="switchList?'card-list':'card'" color="#666666" size="20"
				@click="switchViewFn"></iconfont>

		</uni-nav-bar>
		<!-- 筛选条件及切换视图 -->
		<view class="filter-con">
			<sl-filter ref="refFilter" class="filter" :key="flag" :isTransNav="true" themeColor="#cfb787"
				reflexTitle :menuList="filterList" @result="filterChangeHandle"></sl-filter>
			<view class="all-filter-btn" @click="showAllFilterFn">筛选<iconfont icon="screen" color="#666666"
					size="12"></iconfont>
			</view>
		</view>
		<!-- 列表数据 -->
		<com-scroller ref="refList" :list="modelList" :listKey="listKey" :reload="reload" top="100"
			emptyTip="暂无模特信息，快去上传吧" :queryModel="queryModel" @getMore="getMore" class="list">
			<view>
				<model-item v-for="(item, index) in modelList" :key="index" :data="item"
					:type="switchList?'list':'card'"></model-item>
			</view>
		</com-scroller>

		<canvas canvas-id="shareCanvas" class="canvas" bindlongpress="saveImg"
			:style="{height: canvasHeight+'px',width:canvasWidth+'px'}">
		</canvas>

		<!-- 模特卡 -->
		<com-all-filter ref="refAllFilter" :list="allFilter" @confirm="allFilterConfirm"></com-all-filter>
	</view>
</template>

<script>
	import Header from '@/components/header.vue'
	import modelItem from '@/components/model-item/model-item.vue'
	import comPopup from '@/components/com-popup/com-popup.vue'
	import comAllFilter from '@/components/com-all-filter/com-all-filter.vue'
	import {
		SEX,
		COUNTRY,
		MODEL_TYPE,
		AREA
	} from '@/common/dics.js'
	import {
		modelFilters
	} from '@/common/modelFilter.js'
	export default {
		components: {
			modelItem,
			comPopup,
			comAllFilter,
			Header
		},
		data() {
			return {
				canvasWidth: 400,
				canvasHeight: 0,
				fetch: '', // 列表接口
				flag: false,
				listKey: 'modelList', // 列表请求返回的字段key
				filterList: [],
				allFilter: [],
				switchList: true, // 视图展示是否为列表：list、card
				typeList: [{
					key: '1',
					value: '儿童'
				}, {
					key: '2',
					value: '儿童'
				}, {
					key: '3',
					value: '儿童'
				}, {
					key: '4',
					value: '儿童'
				}, {
					key: '5',
					value: '儿童'
				}, ], // 模特卡列表
				queryModel: { // 请求列表参数
					sex: '', // 性别
					area: '', // 地域
					type: '', // 模特卡
				},
				reload: false,
				modelList: [], // 列表数据
				keywords: '',
				issearch: false,
				params: {
					page: 0,
					keyword: ''
				},
				searchParams: {
					page: 0,
					keyword: ''
				}
			};
		},
		watch: {
			keywords(value) {
				if (value == '') {
					this.getList()
				}
			}
		},
		onLoad() {
			this.getScreen()
			this.getList()
		},
		methods: {
			// 开始搜索
			async confirm() {
				const params = {
					keyword: this.keywords,
					page: this.searchParams.page
				}
				const res = await this.http.httpRequest('/models/getModelList', 'post', params)
				if (res.data.code == 1) {
					this.modelList = res.data.data
					this.modelList.map((item) => {
						this.$set(item, 'checked', false)
					})
					this.issearch = true
				}
			},
			// 获取列表数据
			async getList() {
				this.params.page = 0
				this.modelList = []
				const res = await this.http.httpRequest('/models/getModelList', 'post', this.params)
				this.modelList = res.data.data
				this.modelList.map((item) => {
					this.$set(item, 'checked', false)
				})
			},
			// 获取更多
			async getMore() {
				this.params.page++
				const res = await this.http.httpRequest('/models/getModelList', 'post', this.params)
				if (res.data.data.length == 0) {
					this.$u.toast('没有更多数据了')
					return
				}
				this.modelList = [...this.modelList, ...res.data.data]
				this.modelList.map((item) => {
					this.$set(item, 'checked', false)
				})
			},
			// 获取筛选内容
			async getScreen() {
				let that = this;
				console.log(1)
				this.flag = false
				const res = await that.http.httpRequest('/models/getScreen', 'post')
				const data = res.data.data
				let result = modelFilters
				result[0].detailList = [modelFilters[0].detailList[0], ...data.sex];
				result[1].detailList = [modelFilters[1].detailList[0], ...data.nationality];
				result[2].detailList = [modelFilters[2].detailList[0], ...data.tag];
				result[3].detailList = [modelFilters[3].detailList[0], ...data.areas];
				result[4].detailList = [modelFilters[4].detailList[0], ...data.type];
				result[8].detailList = [modelFilters[8].detailList[0], ...data.show];
				console.log(result)
				this.filterList = result.slice(0, 4)
				this.allFilter = result

				this.flag = true
			},
			// 展示所有筛选项弹窗
			showAllFilterFn() {
				this.$refs.refAllFilter.open();
				this.$refs.refFilter.$refs.popupRef.close();
			},
			// 切换列表展示视图
			switchViewFn() {
				this.switchList = !this.switchList;
			},
			// 分享模特
			shareModle() {
				console.log(this.modelList);
				var imageList = [];
				this.modelList.forEach(function(item, index) {
					if (item.checked == true) {
						imageList.push({
							'name': item.name,
							'image': item.top_pic
						})
					}
				})
				console.log(imageList);
				this.canvasWidth = uni.getSystemInfoSync().windowWidth;

				const wxGetImageInfo = this.promisify(uni.getImageInfo)
				let that = this;
				var InfoList = [];
				var imageInfo = [];
				imageList.forEach(function(item, index) {
					uni.getImageInfo({
						src: item.image,
						success: function(res) {
							res.name = item.name;
							imageInfo.push(res);
							if (index == imageList.length - 1) {
								console.log(imageInfo);
								that.saveCanvas(imageInfo);
							}
						},

					})

				})

				return;

			},

			saveCanvas(imageInfo) {
				uni.showLoading({
					title: "生成图片中，请稍后",
				})
				let that = this;
				const ctx = uni.createCanvasContext('shareCanvas')
				var lastHeight = 0;
				var lineHight = 50; //文字高度
				imageInfo.forEach(function(item, index) {
					var height = parseInt(400 / (item.width / item.height));
					lastHeight = height + lastHeight + lineHight;
				})
				that.canvasHeight = lastHeight;
				console.log(that.canvasHeight);
				that.canvasHeight = lastHeight;
				lastHeight = 0;
				imageInfo.forEach(function(item, index) {
					console.log(item);
					var height = parseInt(400 / (item.width / item.height));
					ctx.drawImage(item.path, 0, lastHeight, 400, height, 0,
						0) //, 600,height,item.width,item.height 
					ctx.font = 'normal 20px STXingkai'; // 字体
					ctx.setFontSize(20) //设置字体大小，默认10
					ctx.setFillStyle('#DD524D') //文字颜色：默认黑色
					lastHeight = height + lastHeight;
					ctx.fillText(item.name, 180, lastHeight + 30);
					lastHeight = lastHeight + lineHight;
				})
				console.log("开始绘制图片");
				ctx.draw(false, () => {
					console.log("开始绘制图片");
					that.tempFileImage()
				})
				that.canvasHeight = 0;
			},

			tempFileImage() {
				console.log("开始保存图片");
				let that = this;
				uni.canvasToTempFilePath({
					canvasId: 'shareCanvas',
					fileType: 'jpg',
					success: (res) => {
						console.log(res);
						that.savePic(res.path)
						uni.getImageInfo({
							src: res.tempFilePath,
							success: function(res) {
								that.savePic(res.path)
							},
							fail: (response) => {
								console.log(response)
							}
						});

						uni.hideLoading()
					},
					fail: (response) => {
						console.log("发生错误", response)
					}
				})
			},
			promisify: api => {
				return (options, ...params) => {
					return new Promise((resolve, reject) => {
						const extras = {
							success: resolve,
							fail: reject
						}
						api({
							...options,
							...extras
						}, ...params)
					})
				}
			},
			savePic: function(tempFilePath) {
				console.log(tempFilePath);
				this.canvasHeight = 0;
				plus.share.sendWithSystem({
					'type': 'image',
					pictures: [tempFilePath]
				}, function() {
					console.log('分享成功');
				}, function(e) {
					console.log('分享失败：' + JSON.stringify(e));
				})
			},

			// 筛选条件改变
			filterChangeHandle(result) {
				let params = {}
				for (let key in result) {
					this.queryModel[key] = result[key];
					params[key] = (result[key].length != 0) ? result[key] : '';
				}
				this.getCategory(params)
				this.reload = true;
				this.$refs.refList.loadData();
			},
			// 获取分类筛选
			async getCategory(params) {
				this.params.page = 0
				this.modelList = []
				const res = await this.http.httpRequest('/models/getModelList', 'post', params)
				this.modelList = res.data.data
				this.modelList.map((item) => {
					this.$set(item, 'checked', false)
				})
			},
			// 全部筛选条件改变
			allFilterConfirm(result) {
				console.log(result)
				for (let key in result.result) {
					this.queryModel[key] = result.result[key];
				}
				this.getAllCategory(this.queryModel)
				this.reload = true;
				console.log("重新加载");
				this.$refs.refList.loadData();
				if (result.isUp) {
					this.showAllFilterFn();
				}
			},
			async getAllCategory(params) {
				this.params.page = 0
				this.modelList = []
				const res = await this.http.httpRequest('/models/getModelList', 'post', params)
				this.modelList = res.data.data
				this.modelList.map((item) => {
					this.$set(item, 'checked', false)
				})
			},
			loadList() {}
		},
	};
</script>

<style lang="scss" scoped>
	.serarch-con {
		height: 72upx;
		margin: 8upx 0;
		padding: 0 30upx;
		line-height: 72upx;
		border-radius: 40upx;
		box-sizing: border-box;
		background-color: #f8f8f8;

		.search-input {
			height: 72upx;
			margin-left: 20upx;
			line-height: 72upx;
		}
	}

	.filter-con {
		position: absolute;
		top: --window-top;
		/* css变量 */
		left: 0;
		width: 100%;
		z-index: 10;
		display: flex;
		align-items: center;
		background-color: #fff;
		
		.filter {
			width: calc(100% - 100upx);
		}

		.all-filter-btn {
			width: 150upx;
			color: #666666;
			font-size: 28upx;
			text-align: center;
		}
	}

	.filter-list {
		height: 200%;
		padding: 0 30upx 30upx;
		font-size: 28upx;
		overflow: auto;
margin-top: 100upx;
		.filter-title {
			height: 80upx;
			line-height: 80upx;
			font-size: 30upx;
			font-weight: 700;
		}

		.filter-option-item {
			display: inline-block;
			margin-right: 20upx;
			margin-bottom: 20upx;
			padding: 10upx 30upx;
			color: #666666;
			background-color: $bg_color;
			border-radius: 30upx;
		}

		.slider-range {
			padding-left: 50upx !important;
			padding-right: 50upx !important;
		}
	}
</style>
